<template>
	<div>
		<div class="main_operation">
			<div class="operation_left">
				<a-button v-if="routerShow($route,'equipmentCode_add')" class="mr10" type="primary" @click="addBtn">添加</a-button>
			</div>
			<div class="operation_right">
        <a-select class="mr10" v-model="searchVal" style="width: 180px" placeholder="搜索类型">
          <a-select-option :value="0">设备MAC地址</a-select-option>
          <a-select-option :value="1">设备序列号</a-select-option>
        </a-select>
				<a-input-search style="width:300px;" :placeholder="searchVal == 0 ? '请输入设备MAC地址搜索' : '请输入设备序列号搜索'" @search="onSearch" enterButton />
			</div>
		</div>
		<div class="main">
			<a-table :pagination="false" 
         :loading="tableLoad"
         :columns="Fields"
			   :dataSource="dataLists.data"
         :rowKey="record => record.id"
         :scroll="{x: 1100, y: 500 }">
			>
        <template slot="is_OnLine" slot-scope="text, record">
          <a-switch checkedChildren="在线" unCheckedChildren="离线" :defaultChecked="record.is_OnLine == 1 ? true : false"
           :key="record.id" @change="val=>isOnLine(val, record)" />
        </template>
        <template slot="action" slot-scope="text, record">
        		<a-button v-if="routerShow($route,'equipmentCode_update')" size="small" class="mr5" type="primary" @click="editBtn(record)">编辑</a-button>
        		<a-button v-if="routerShow($route,'equipmentCode_delete')" size="small" type="danger" @click="delBtn(record)">删除</a-button>
        </template>
			</a-table>
      <div class="pageBox">
      	<a-pagination
      		:total="dataLists.total"
      		:showTotal="total => `共 ${total} 条数据`"
      		:pageSize="dataLists.per_page"
      		:defaultCurrent="1"
      		@change="pageChange"
      	/>
      </div>
		</div>
    <!-- 添加编辑 -->
		<a-modal
      :maskClosable="false" :destroyOnClose="true"
      :title="titleModel" :width="600" v-model="visible"
      :confirmLoading="confirmLoading"
		  @ok="handleOk" @cancel="handleCancel">
			<a-form>
        <a-form-item required label="设备MAC地址:" :label-col="{ md: 5 ,xs: 24 }" :wrapper-col="{ md: 18 ,xs: 24 }">
        	<a-input  v-model="formItem.code" placeholder="请输入设备MAC地址" />
        </a-form-item>
        <a-form-item required label="设备序列号:" :label-col="{ md: 5 ,xs: 24 }" :wrapper-col="{ md: 18 ,xs: 24 }">
        	<a-input  v-model="formItem.serial_num" placeholder="请输入设备序列号" />
        </a-form-item>
			</a-form>
		</a-modal>
	</div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
	name: 'List',
	data() {
		return {
      /* 通用模块 */
        //列表
      tableLoad: false,//列表loading状态
      formList:{          //列表信息
      	page: 1
      },
      selectedRowKeys: [],//勾选的id
      /* 通用模块end */

      /* 添加编辑 */
      titleModel: '',//标题
      visible: false,//窗口显示隐藏
      confirmLoading: false,//按钮loading状态
      formItem:{
        code: '',
        serial_num: '',
      },
      /* 添加编辑end */
      searchVal: 0
		};
	},
  computed: {
  	...mapState({
  		Fields: state => state.equipmentCode.Fields,
  		dataLists: state => state.equipmentCode.dataLists,
  		requestCode: state => state.equipmentCode.requestCode,
      // deviceTypeData: state => state.equipDeviceType.deviceTypeData,  //设备类型信息
  	}),
  },
	mounted() {
    // this.deviceTypeAll()
		this.changeData()
	},
	methods: {
    /* 通用模块 */
      /* 接口 */
    ...mapActions({
      getLists: 'equipmentCode/getLists',     //列表
      dataAdd: 'equipmentCode/dataAdd',        //添加
      dataEdit: 'equipmentCode/dataEdit',      //编辑
      dataDel: 'equipmentCode/dataDel',        //删除
      switchState: 'equipmentCode/switchState',   //状态更新
      // deviceTypeAll: 'equipDeviceType/deviceTypeAll',        // 设备类型信息
      // deviceCodeAll: 'equipmentCode/deviceCodeAll',        // 设备未使用编号信息

    }),
      // 勾选
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys
    },
      // 重新获取列表数据
    changeData(){
      this.tableLoad = true
      setTimeout(()=> {
        this.getLists(this.formList)
        this.tableLoad = false
      }, 800);
    },
    //搜索
    onSearch(val) {
      if (this.searchVal === 0) {
        this.formList = {          //列表信息
          code: val,
          page: 1
        }
      } else {
        this.formList = {          //列表信息
          serial_num: val,
          page: 1
        }
      }
      this.changeData()
    },
      // 页码
    pageChange(page) {
    	this.formList.page = page;
    	this.getLists(this.formList)
    },
    /* 通用模块end */

    /* 添加编辑 */
      // 添加
    addBtn() {
      this.titleModel = '添加设备MAC地址'
      this.formItem = {
        code: '',
        serial_num: '',
      }
      this.visible = true
    },
      // 编辑
    editBtn(item) {
      console.log(item);
      this.titleModel = '编辑设备MAC地址'
      this.formItem.id = item.id
      this.formItem.code = item.code
      this.formItem.serial_num = item.serial_num
      this.visible = true
    },
      // 窗口确定
    handleOk() {
    	this.confirmLoading = true;
      if(this.titleModel == '添加设备MAC地址') {
        this.formList = {          //列表信息还原
        	page: 1
        }
        this.dataAdd(this.formItem)
      } else {
        this.dataEdit(this.formItem)
      }
    	setTimeout(() => {
        if(this.requestCode === 0) {
          this.visible = false;
          this.changeData()
        }
    		this.confirmLoading = false;
    	}, 1000);
    },
      // 窗口取消
    handleCancel() {
      this.visible = false
    },
    /* 添加编辑end */
    /* 删除 */
    delBtn(item) {
      let _this = this
      this.$confirm({
    		title: `您确定要删除 ${item.code} 吗?`,
    		content: `删除后将不可恢复,请仔细核对!`,
    		okText: '确定',
    		okType: 'danger',
    		cancelText: '取消',
    		onOk() {
    			_this.dataDel(item.id)
    			_this.changeData()
    		},
    	});
    },
    // 状态开关
    isOnLine(val, item){
      item.is_OnLine = val ? '1' : '0'
      let stateForm = {
        id: item.id,
        status: val ? 1 : 0
      }
      this.switchState(stateForm)
    }
	}
};
</script>

<style></style>
